<!-- 添加/修改应用-->
<template>
	<div class="app-container">
		<el-dialog
		  :title="ruleForm.app_id ? '修改应用' : '添加应用'"
		  :visible.sync="dialogVisible"
		  width="800px"
		  top="50px"
		  :before-close="handleClose">
		  <div class="el-dialog-view">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="应用图标" :required="true">
					<div class="avatar-uploader" @click="upImg()">
					  <img v-if="ruleForm.app_icon" :src="ruleForm.app_icon" class="avatar">
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</div>
				</el-form-item>
				<el-form-item label="应用名词" prop="app_name">
					<el-input v-model="ruleForm.app_name" placeholder="请输入应用名词" style="width: 500px;"></el-input>
				</el-form-item>
				<!-- <el-form-item label="应用地址" prop="app_url">
					<el-input v-model="ruleForm.app_url" placeholder="请输入应用地址" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="H5地址" prop="html_url">
					<el-input v-model="ruleForm.html_url" placeholder="请输入H5地址" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="小程序地址" prop="xcx_url">
					<el-input v-model="ruleForm.xcx_url" placeholder="请输入小程序地址" style="width: 500px;"></el-input>
				</el-form-item> -->
				<el-form-item label="应用代码" prop="app_code">
					<el-select v-model="ruleForm.app_code" placeholder="请选择" style="width: 500px;" filterable>
						<el-option :label="item.label" :value="item.value" v-for="(item,index) in appCodeList" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="描述" prop="app_desc">
					<el-input v-model="ruleForm.app_desc" type="textarea"  :rows="3" placeholder="请输入描述" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="应用详情" :required="true">
				  <div class="Ueditor" style="width: 600px;height: 500px;" id="UeditorId"></div>
				</el-form-item>
				<el-form-item label="排序" >
					<el-input v-model="ruleForm.app_sort" type="number" placeholder="请输入排序" style="width: 500px;"></el-input>
				</el-form-item>
				<el-form-item label="小程序上显示">
					<el-switch
					  v-model="ruleForm.show_home"
					  active-text="显示"
					  inactive-text="不显示">
					</el-switch>
				</el-form-item>
				<el-form-item label="状态">
					<el-switch
					  v-model="ruleForm.state"
					  active-text="正常"
					  inactive-text="禁用">
					</el-switch>
				</el-form-item>
			</el-form>
		  </div>
		    <span slot="footer" class="dialog-footer">
		      <el-button @click="handleClose()">返 回</el-button>
		      <el-button type="primary" @click="save()">保 存</el-button>
		    </span>
		</el-dialog>
	</div>
</template>

<script>
import Api from '@/api/pages/application-center/index.js';
import { hhObj, hhFile, hhFolder } from 'hhframe-web'
import { getToken } from '@/api/qiniu'
export default {
	name: 'entrance-guard_use-user-add',
	props:{
		"item":Object
	},
	data() {
		return {
			dialogVisible: true,
			formInline: {},
			tableData: [],
			ruleForm: {
				app_id:'',
				app_code:'',
				app_desc:'',
				app_icon:'',//图标
				app_url:'',//应用地址
				app_sort:1,//排序
				app_context:'',//应用详情
				state:true,//状态
				xcx_url:'',//小程序地址
				html_url:'',//h5地址
				app_name:'',//
				show_home:true
			},
			rules: {
				app_name: [{ required: true, message: '不能为空', trigger: 'blur' }],
				app_desc: [{ required: true, message: '不能为空', trigger: 'blur' }],
				app_url: [{ required: true, message: '不能为空', trigger: 'blur' }],
				app_sort: [{ required: true, message: '不能为空', trigger: 'blur' }],
				app_code: [{ required: true, message: '请选择应用代码', trigger: 'change' }],
				app_icon: [{ required: true, message: '请上传应用图标', trigger: 'change' }],
			},
			qn:{
			  token: "",
			  key: ""
			},
			id:'',
			ue:'',
			appCodeList:'',
		};
	},
	beforeDestroy() {
		if (this.ue !== null && this.ue.destroy) {
			this.ue.destroy()
		}
	},
	created() {
		if(this.item) {
			this.id = this.item.app_id;
			this.ruleForm =JSON.parse(JSON.stringify(this.item));
			if(this.item.state == 2) {
				this.ruleForm.state = false;
			}else{
				this.ruleForm.state = true;
			}
		}
		this.getToken();
	},
	mounted() {
		this.getToken();
		this.getAppCode();
		setTimeout(() => {
			this.$nextTick(()=>{
				this.madeUeditor(this.item.app_context);
			});
		},300)
	},
	methods: {
		getAppCode() {
			Api.getAppCode().then(res => {
				let list = [];
				for (let key in res.data) {
					list.push({
						label:key,
						value:res.data[key]
					})
				}
				this.appCodeList = list;
			})
		},
		getToken() {
			if (!this.$store.state.app.qiniuToken) {
				getToken().then(res => {
		      this.qn.token = res.uptoken;
					this.$store.dispatch('app/setQiniuToken', res.uptoken)
				})
			}
		},
		madeUeditor(content) {
			if (!this.ue) {
				this.ue = window.UE.getEditor('UeditorId', {
					hhConfig: {
						hh: {
							hhObj,
							hhFile,
							hhFolder
						}
					}
				})
				let ue = this.ue
				ue.ready(function () {
					this.setHeight(400); //设置高度
				})
				if(content) {
					setTimeout(function() {
						ue.setContent(content)
					},300);
				};
			}
		},
		
		handleClose(state = false) {
			this.$emit('close',state);
		},
		upImg() {
			this.hhFolder({
			    max: 1,
			    filter: "image",
			    success: files=>{
					console.log('files',files)
			        this.ruleForm.app_icon = files[0].url;
					this.ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
			    }
			});
		},
		save() {
			if(!this.ruleForm.app_icon) {
				this.$message.error('请上传应用图标');
				return
			}
			this.ruleForm.app_context = this.ue.getContent()
			if(!this.ruleForm.app_context) {
				this.$message.error('请输入应用详情介绍');
				return
			}
			this.$refs['ruleForm'].validate((valid) => {
			  if (valid) {
				  let data = {};
				  if(this.id) {
				  	data['app_id'] = this.id;
				  }
				  data['app_code'] = this.ruleForm.app_code;
				  data['app_desc'] = this.ruleForm.app_desc;
				  data['app_icon'] = this.ruleForm.app_icon;
				  data['app_url'] = this.ruleForm.app_url;
				  data['app_sort'] = this.ruleForm.app_sort;
				  data['app_context'] = this.ruleForm.app_context;
				  data['state'] = this.ruleForm.state ? 1 : 2;
				  data['xcx_url'] = this.ruleForm.xcx_url;
				  data['html_url'] = this.ruleForm.html_url;
				  data['app_name'] = this.ruleForm.app_name;
				  data['show_home'] = this.ruleForm.show_home;
				  Api.save(data).then(res => {
				  	if(res.state) {
						this.$message({
						  message: '保存成功',
						  type: 'success'
						});
						this.handleClose(true)
					}else{
						this.$message.error(res.msg);
					}
				  })
			  } else {
				return false;
			  }
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.title {
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
}
 .el-dialog-view{
	  height: calc(100vh - 300px);
	  overflow-y: auto;
	  padding: 10px;
	  border: 1px solid #f5f5f5;
  }
</style>

<style lang="scss">
.dialogVideo {
	.el-dialog__body {
		padding: 20px;
	}
}
.avatar-uploader  {
	width: 100px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

</style>
